<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<link rel="apple-touch-icon" sizes="76x76" href="assets/img/demo/tit2.jpg">
		<link rel="icon" type="image/png" href="assets/img/demo/tit2.jpg">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>物理量纲</title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
		<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
			name='viewport' />

		<!-- Google Font -->
		<link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,600,800" rel="stylesheet">

		<!-- Font Awesome Icons -->
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
			integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

		<!-- Main CSS -->
		<link href="./assets/css/main.css" rel="stylesheet" />

		<!-- Animation CSS -->
		<link href="./assets/css/vendor/aos.css" rel="stylesheet" />

		<style type="text/css">
			#font {
				font-size: large;
			}
		</style>

	</head>

	<body>

		<!----------------------------------------------------------------------
NAVBAR (remove topnav if you don't want changed nav background on scroll)
------------------------------------------------------------------------>
		<nav class="topnav navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
			<div class="container-fluid">
				<a class="navbar-brand" href="./index.html"><i class="fas fa-anchor mr-2"></i><strong>Anchor
						YRC</strong></a>
				<button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
					data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false"
					aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="navbar-collapse collapse" id="navbarColor02" style="">
					<ul class="navbar-nav mr-auto d-flex align-items-center">
						<li class="nav-item">
							<a class="nav-link" href="#fabupinglun">发布评论</a>
						</li>

						<li class="nav-item">
							<a class="nav-link" href="#chakanpinglun">查看评论</a>
						</li>
					</ul>
					<ul class="navbar-nav ml-auto d-flex align-items-center">
						<li class="nav-item">
							<span class="nav-link" href="#">
								<a class="btn btn-info btn-round shadow-sm" href="#" data-toggle="modal"
									data-target="#exampleModalCenter6"><i class="fas fa-cloud-download-alt"></i> 建议反馈 <a
										href="#" class="" class="hidden"></a>
								</a>
								<!-- <a class="btn btn-info btn-round shadow-sm" href="#" data-toggle="modal" data-target="#modal_newsletter"><i class="fas fa-cloud-download-alt"></i> 下载源码 <a href="#" class="" class="hidden"></a>
			</a> -->
							</span>
						</li>
					</ul>
				</div>
			</div>
		</nav>
		<!-- End Navbar -->


		<!-------------------------------------
HEADER
--------------------------------------->
		<header>
			<div class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-3 bg-primary position-relative">
				<div class="container-fluid text-white h-100">
					<div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5">
						<div class="col pt-4 pb-4">
							<h1 class="display-3"><strong>Help and Talk</strong></h1>
							<h5 class="font-weight-light mb-4">作者：192088206杨润成<strong> </strong> </h5>
							<a href="index.html" class="btn btn-lg btn-outline-white btn-round">Back Index</a>
						</div>
						<!-- <div class="col align-self-bottom align-items-right text-right h-max-380 h-xl-560 position-relative z-index-1">
                    <img src="assets/img/demo/tit2.jpg" class="rounded img-fluid">
                </div> -->
					</div>
				</div>
			</div>
			<svg style="-webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg); margin-top: -1px;"
				version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
				x="0px" y="0px" viewbox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
				<path class="bg-primary"
					d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z" />
			</svg>
		</header>
		<!--- END HEADER -->

		<!-- Main -->
		<div class="container pt-5 pb-5" data-aos="fade-up">
			<div class="row justify-content-center">
				<div class="col-md-8">
					<div class="form-group">
						<h3 id="fabupinglun" for="exampleFormControlTextarea1">请输入你的评论:</h3>

						<textarea id="wenben" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
					</div>
					<button id="fabu" type="button" class="btn btn-primary btn-lg btn-block">发布评论</button>
					<div id="font" class="pt-5 pb-5">
						<h3 id="chakanpinglun">评论区:</h3>
						<ul id="liebiao">
							<li>这是一个换算物理单位的网站</li>
							<button type="button" class="btn btn-block btn-dark btn-sm" data-toggle="tooltip"
								data-placement="right" title="对不起，你没有删除该评论的权限">
								删除
							</button>
							<li>可以从网站中获取物理新闻的物理知识</li>
							<button type="button" class="btn btn-block btn-dark btn-sm" data-toggle="tooltip"
								data-placement="right" title="对不起，你没有删除该评论的权限">
								删除
							</button>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- End Main -->


		<!-- Modal 下载 -->
		<div class="modal fade" id="exampleModalCenter6" tabindex="-1" role="dialog"
			aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLongTitle">建议或反馈</h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
					</div>
					<div class="modal-body">
						<form class="was-validated">
							<div class="mb-3">
								<label for="validationTextarea" class="form-label">内容详情：</label>
								<textarea class="form-control" id="validationTextarea" placeholder="此处填写内容"
									required></textarea>
								<div class="invalid-feedback">
									内容不能为空
								</div>
							</div>
							<label class="form-label">内容分类：</label>
							<div class="form-check">
								<input type="radio" class="form-check-input" id="validationFormCheck2"
									name="radio-stacked" required>
								<label class="form-check-label" for="validationFormCheck2">提出建议</label>
							</div>
							<div class="form-check mb-3">
								<input type="radio" class="form-check-input" id="validationFormCheck3"
									name="radio-stacked" required>
								<label class="form-check-label" for="validationFormCheck3">问题反馈</label>
								<div class="invalid-feedback">请勾选分类</div>
							</div>

							<div class="">
								<label for="validationServerUsername">你的名字：</label>
								<div class="input-group">
									<div class="input-group-prepend">
										<span class="input-group-text" id="inputGroupPrepend3">@</span>
									</div>
									<input type="text" class="form-control is-invalid" id="validationServerUsername"
										placeholder="Username" aria-describedby="inputGroupPrepend3" value="默认"
										required>

								</div>
							</div>
							<br><br>
							<div class="form-check mb-3">
								<input type="checkbox" class="form-check-input" id="validationFormCheck1" required>
								<label class="form-check-label" for="validationFormCheck1">我承诺所输入的内容真实且可靠</label>
								<div class="invalid-feedback">此选项必须勾选</div>
							</div>

							<div class="">
								<button class="btn btn-primary btn-block" type="submit">提交</button>
							</div>
						</form>
					</div>

				</div>
			</div>
		</div>
		<!--------------------------------------
END DEMO MODAL & DONATE BUTTON
--------------------------------------->


		<!--------------------------------------
FOOTER
--------------------------------------->
		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
			x="0px" y="0px" viewbox="0 0 1440 126" style="enable-background:new 0 0 1440 126;" xml:space="preserve">
			<path class="bg-black"
				d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z" />
		</svg>
		<footer class="bg-black pb-5">
			<div class="container">
				<div class="row">
					<div class="col-12 col-md mr-4">
						<i class="fas fa-copyright text-white"></i>
						<small class="d-block mt-3 text-muted">©
							<script>
								document.write(new Date().getFullYear())
							</script>
							Anchor RunCheng Yang, by Yrc <a target="_blank" href="#">@Gitee</a>. License MIT.
						</small>
					</div>
					<div class="col-6 col-md">
						<h5 class="mb-4 text-white">Features</h5>
						<ul class="list-unstyled text-small">
							<li><a class="text-muted" href="#">Cool stuff</a></li>
							<li><a class="text-muted" href="#">Random feature</a></li>
							<li><a class="text-muted" href="#">Team feature</a></li>
							<li><a class="text-muted" href="#">Stuff for developers</a></li>
						</ul>
					</div>
					<div class="col-6 col-md">
						<h5 class="mb-4 text-white">Resources</h5>
						<ul class="list-unstyled text-small">
							<li><a class="text-muted" href="#">Resource</a></li>
							<li><a class="text-muted" href="#">Resource name</a></li>
							<li><a class="text-muted" href="#">Another resource</a></li>
							<li><a class="text-muted" href="#">Final resource</a></li>
						</ul>
					</div>
					<div class="col-6 col-md">
						<h5 class="mb-4 text-white">Utilities</h5>
						<ul class="list-unstyled text-small">
							<li><a class="text-muted" href="#">Business</a></li>
							<li><a class="text-muted" href="#">Education</a></li>
							<li><a class="text-muted" href="#">Government</a></li>
							<li><a class="text-muted" href="#">Gaming</a></li>
						</ul>
					</div>
					<div class="col-6 col-md">
						<h5 class="mb-4 text-white">About</h5>
						<ul class="list-unstyled text-small">
							<li><a class="text-muted" href="#">Team</a></li>
							<li><a class="text-muted" href="#">Locations</a></li>
							<li><a class="text-muted" href="#">Privacy</a></li>
							<li><a class="text-muted" href="#">Terms</a></li>
						</ul>
					</div>
				</div>
			</div>
		</footer>

		<!--------------------------------------
JAVASCRIPTS
--------------------------------------->
		<script src="./assets/js/vendor/jquery.min.js" type="text/javascript"></script>
		<script src="./assets/js/vendor/popper.min.js" type="text/javascript"></script>
		<script src="./assets/js/vendor/bootstrap.min.js" type="text/javascript"></script>
		<script src="./assets/js/vendor/share.js" type="text/javascript"></script>
		<script src="./assets/js/functions.js" type="text/javascript"></script>

		<script>
			//1、获取元素
			var txt = document.getElementById("wenben");
			var btn = document.getElementById("fabu");
			var ul = document.getElementById("liebiao");
			//2、给button绑定点击事件
			/* li.innerHTML = txt.value +
			 "<div class='d-grid gap-2 d-md-flex justify-content-md-end'>" + 
			 "<a class='btn btn-danger btn-sm justify-content-md-end' href='javascript:;'>删除</a>" + 
			 "</div>" */
			btn.onclick = function() {
				if (txt.value == "") { //当文本框中没有文字时，提示
					alert("您没有输入内容")
				} else {
					//创建元素li作为留言区
					var li = document.createElement("li");
					//将文本框中的内容放到li中,a标签中href中的内容代表什么都不执行
					li.innerHTML = txt.value + "<br><a class='btn btn-danger btn-block btn-sm' href='javascript:;'>删除</a>"
					txt.value = ""; //添加之后文本框的内容清空
					//将留言添加到ul中，而且在最上方
					ul.insertBefore(li, ul.children[0]);
					//当点击删除时删除ul中的li
					var as = document.querySelectorAll("a");
					//循环给每个删除绑定事件
					for (var i = 0; i < as.length; i++) {
						as[i].onclick = function() {
							//删除当前a标签所在位置的父节点li
							ul.removeChild(this.parentNode);
						}
					}
				}
			}
		</script>

		<!-- Animation -->
		<script src="./assets/js/vendor/aos.js" type="text/javascript"></script>
		<noscript>
			<style>
				*[data-aos] {
					display: block !important;
					opacity: 1 !important;
					visibility: visible !important;
				}
			</style>
		</noscript>
		<script>
			AOS.init({
				duration: 700
			});
		</script>

		<!-- Disable animation on less than 1200px, change value if you like -->
		<script>
			AOS.init({
				disable: function() {
					var maxWidth = 1200;
					return window.innerWidth < maxWidth;
				}
			});
		</script>

		<!-- Carousel Height Smooth -->
		<script>
			$('.carousel').on('slide.bs.carousel', function(event) {
				var height = $(event.relatedTarget).height();
				var $innerCarousel = $(event.target).find('.carousel-inner');
				$innerCarousel.animate({
					height: height
				});
			});
		</script>

		<!-- Popovers -->
		<script>
			$(function() {
				$('[data-toggle="popover"]').popover()
			})
			$('.popover-dismiss').popover({
				trigger: 'focus'
			})
		</script>

		<!-- Tooltips -->
		<script>
			$(function() {
				$('[data-toggle="tooltip"]').tooltip()
			})
		</script>

	</body>
</html>
